import React from 'react';
import { Table } from 'antd';
import './table.scss'
const data = [
  { key: '1', type: '简单报表', percent: '30%', count: 300, color: '#1677ff' },
  { key: '2', type: '表单', percent: '20%', count: 200, color: '#52c41a' },
  { key: '3', type: '静态页', percent: '20%', count: 200, color: '#faad14' },
  { key: '4', type: '动态内容', percent: '20%', count: 200, color: '#722ed1' },
  { key: '5', type: '其他', percent: '10%', count: 100, color: '#eb2f96' },
];
const totalCount = data.reduce((sum, item) => sum + item.count, 0);
const columns = [
  {
    title: (
      <div style={{ 
        fontSize: 17, 
        fontWeight: 'bold', 
        backgroundColor: '#F9FAFB', /* 浅灰色背景 */
        padding: '10px', /* 让背景填充更好看 */
        borderRadius: '5px' /* 圆角，让 UI 更美观 */
      }}>
        <div> 页面类型 </div>
        <span style={{ fontSize: 20, fontWeight: 'bold' }}>{data.length}</span>
        <span style={{ fontSize: 17, fontWeight: 'normal' }}>类</span>
      </div>
    ),
    dataIndex: 'type',
    key: 'type',
    render: (text, record) => (
      <span style={{ 
        display: 'inline-flex', 
        alignItems: 'center', 
        backgroundColor: '#F9FAFB', /* 浅灰色背景 */
        padding: '5px 10px', 
        borderRadius: '5px' 
      }}>
        <span
          style={{
            display: 'inline-block',
            width: 8,
            height: 8,
            backgroundColor: record.color,
            marginRight: 8,
          }}
        ></span>
        {text}
      </span>
    ),
  },
  {
    title:<div style={{ textAlign: 'left' }}><div style={{ fontSize: 17, fontWeight: 'bold'}}>页面数 </div>
    <span style={{ fontSize: 20, fontWeight: 'bold' }}> {totalCount} </span> 
    <span style={{ fontSize: 17,fontWeight: 'normal' }}> 个</span>
    </div>
    ,
    colSpan: 2,
    onCell: () => ({
      style: { fontWeight: 'bold' }
    }),
    dataIndex: 'percent',
    key: 'percent',
    align: 'right', // 让页面数这一列靠右对齐
    render: (percent, record) => (
      <span>
        {record.percent} 
      </span>
    ),
  },
  {
    title:'占比',
    colSpan: 0,
    dataIndex: 'count',
    onCell: () => ({
      style: { fontWeight: 'bold' }
    }),
    key: 'count',
    align: 'right', // 让页面数这一列靠右对齐
    render: (count, record) => (
      <span>
        {count} 
      </span>
    ),
  },


];

const PageTypeTable = () => {
  return (
    
    <Table
      className="tablecss"
      columns={columns}
      dataSource={data}
      pagination={false}
      rowClassName={() => "tablecss"}
      bordered={false}
      title={() => (
        <div style={{ fontWeight: 600, padding: 0, margin: 0 }}>
          <span style={{ fontSize: 20, fontWeight: 'bold', marginLeft: -12,borderRadius: '0px' }}>
            页面类型统计
          </span>
        </div>
      )}
      style={{ background: 'white', border: '5px', overflow: 'hidden' }} 
/>
  );
};

export default PageTypeTable;
